<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p
			{
				margin-left: 40px;
			}
			li
			{
				float: left;
				margin-left: 20px;
				margin-top: 20px;
				border: 1px solid salmon;
				background-color: firebrick;
				list-style: none;
			}
			#div2
			{
				width: 300px;
				
				border: 1px solid aqua;
			}
			input[type=button]
			{
				width: 300px;
				height: 27px;
				display: block;
				margin-top: 11px;
			}
			#div1{
				width: 700px;
				height: 300px;
				border: 1px solid saddlebrown;
				margin: 0 auto;
				
			}
			#div2   /* 选择第一个块去进行浮动*/
			{
				float: left;
			}
			#div3{
				margin-left: 350px;
			}
		</style>
		<script type="text/javascript">
			window.onload=function()
			{
				 function MyClick(idStr,fun)
				{
					var btn=document.getElementById(idStr);
				     btn.onclick=fun;
				}
				//创建一个广州节点，添加到#city下
				MyClick("btn01",function(){
					//创建li元素节点，需要一个标签名作为参数，根据该标签名创建元素节点对象，并创建好的对象返回
					 var li=document.createElement("li");
					
					//创建广州文本节点,可以用来创建一个文本节点对象，需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
					var text=document.createTextNode("广州");
					
					//将广州text设置为li的子节点
					var LiText=li.appendChild(text);  //这个并没有返回值返回的不是li了直接li就行了看下面
					
					//将广州添加到city下
					var city=document.getElementById("city");
					city.appendChild(li);
				})
				
				
				//将广州节点插入到#bj前面
				MyClick("btn02",function(){
					var li=document.createElement("li");
					var text=document.createTextNode("广州");
					li.appendChild(text);
					var bj=document.getElementById("bj");
					var city=document.getElementById("city");
					city.insertBefore(li,bj);//新的旧的
					
				})
				
				
				//使用广州节点替换北京节点
				MyClick("btn03",function(){
					var li=document.createElement("li");
					var text=document.createTextNode("广州");
					li.appendChild(text);
					var bj=document.getElementById("bj");
					var city=document.getElementById("city");
					city.replaceChild(li,bj);  //新的旧的
				})
				
				//删除#bj节点
				MyClick("btn04",function(){
					var bj=document.getElementById("bj");
					//var city=document.getElementById("city");
					//city.removeChild(bj);
					bj.parentNode.removeChild(bj);  //不知道它的父节点，那就先去获取  //常用
				})
				
				//读取#city内的HTML代码
				MyClick("btn05",function(){
					var city=document.getElementById("city");
					alert(city.innerHTML);
				})
				
				//设置#bj内的HTML代码
				MyClick("btn06",function(){
					var bj=document.getElementById("bj");
					var a=prompt("请输入");
					var li=document.createElement("li");
					var text=document.createTextNode(a);
					li.appendChild(text);  //text究竟是什么
					bj.innerHTML=li.innerHTML;    //bj是一个元素节点，text是一个文本节点  innerText是什么 文本节点没有innerText，它的innerHTML是什么
				})
				
				MyClick("btn07",function(){
					var city=document.getElementById("city");
					var li=document.createElement("li");
					li.innerHTML="广州";
					city.appendChild(li);   //这种方式最好的
				})
			}
		</script>
	</head>
	<body>
		<div id="div1">
		<div id="div2"><p>你喜欢哪个城市？</p>
		<ul id="city">
			<li id="bj">北京</li>
			<li>上海</li>
			<li>东京</li>
			<li>首尔</li>
		</ul></div>
		<div id="div3">
			<input id="btn01" type="button" value="创建一个广州节点,添加到#city下"/>
			<input id="btn02" type="button" value="将广州节点插入到#bj前面"/>
			<input id="btn03" type="button" value="使用广州节点替换#bj节点"/>
			<input id="btn04" type="button" value="删除#bj节点"/>
			<input id="btn05" type="button" value="读取#city内的HTML代码"/>
			<input id="btn06" type="button" value="设置#bj内的HTML代码"/>
			<input id="btn07" type="button" value="7"/>
		</div>
		</div>
	</body>
</html>